<template>
	<view class="map-container">
		<canvas canvas-id="map" type="2d"  class="canvas-container" id="map" >
		</canvas>
	</view>
</template>

<script>
	import img  from "@/static/asset/nfbg(1).png"
	export default {
		data() {
			return {
				img,
				len:null,
				move:null,
				scales : 1,
				time: null
			}
		},
		mounted(){
		  const i = new Image();
		  i.src = img;
		  let context = uni.createCanvasContext('map');
			  context.drawImage(i,0,0)
		       
		  		
		  		

		  
		  
		},
		methods: {
			touStart(e){
				// const t = e.touches
				// if(t.length === 2){
				// 	this.len = Math.hypot(t[0].pageX - t[1].pageX,t[0].pageY -t[0].pageY)
					 
				// }
				
			},
			touMove(e){
				// const t = e.touches;
				// this.dub(()=>{
					
				// 	if(t.length === 2){
				// 		const moveStar = Math.hypot(t[0].pageX - t[1].pageX,t[0].pageY -t[0].pageY)
						
						
				// 		this.move = Math.floor( moveStar);
					  
				// 		console.log( (  this.move  / Math.floor(this.len) ) * this.scales);
						// if(newScale > 4){
						// 	newScale = 4;
						// }
						
						// this.scale = newScale;
			
			// 		}
					
			// 	})
				
			},
			dub(fn){
				clearTimeout(this.time)
				this.time = setTimeout(()=>{
					fn()
				},100)
					
			}
			
		}
	}
</script>

<style scoped>
.map-container{
	
	height: 300%;
	width: 300%;
	overflow: scroll;
}
.ny-map{
	width: 100%;
	height: 100%;

	
}
.test{
	z-index: 30px;
	
	font-size: 20px;
	font-weight: 700;
	transform: translateY(100px);
	
}
.test1{
	z-index: 30px;
	color:white;
	width: 100%;
	font-size: 20px;
	font-weight: 700;
	transform: translateY(120px);

}
.canvas-container{
	width: 100%;
	height: inherit;
}
</style>
